<script setup>
// 引入three对象
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
console.log(THREE);

// 所有的Three项目都起源这三个元素
// 1、场景（用来存放画面上看到的物体）
// 2、摄像机（类似于眼睛）
// 创建一些模型（人，桌子椅子，楼房）
// 3、渲染器（把上面的场景和摄像机，还有其他物体渲染到页面的一个工具）

// 1、场景（用来存放画面上看到的物体）
const scene = new THREE.Scene();
// 2、摄像机（类似于眼睛）
// 四个参数设置：摄像机椎体角度，摄像机椎体看到的宽高比（设置成窗口的宽高比就可以了）
// 摄像机椎体看到的物体的最近和最远的距离
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000
);

// 3、渲染器（把上面的场景和摄像机，还有其他物体渲染到页面的一个工具）
const renderer = new THREE.WebGLRenderer({
  // 设置抗锯齿
  antialias: true,
});
// 设置renderer的背景颜色
renderer.setClearColor(0x79deec); // 天蓝色
// 设置渲染的画面的宽高，设置成窗口宽高就可以了
renderer.setSize(window.innerWidth, window.innerHeight);
// 追加一个渲染dom的app盒子下面（底层是webgl渲染的canvas内容）
document.getElementById("app").appendChild(renderer.domElement);

// 4、创建立方体，最终要添加到场景中
const geometry = new THREE.BoxGeometry(2, 2, 2); // 立方体轮廓
// var materail = new THREE.MeshLambertMaterial({ color: 0xff0000 }); // 非光滑表面材质没有高亮的镜面反射
// 创建材质，红色的材质，有线条呈现
const materail = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  // 设置线条呈现
  wireframe: true,
});
// 把材质渲染到立方体上，得到有材质的立方体
const cube = new THREE.Mesh(geometry, materail);
// cube.position.set(0, 0, 0);
// 在场景中添加有这个材质的立方体
scene.add(cube);
// 一定要设置摄像机的距离，否则摄像机在原点上(0,0,0)位置
camera.position.z = 10;
camera.position.x = 4;
camera.position.y = 6;
cube.rotation.y = 1;
// 5、创建轨道控制器(控制相机轨道)
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 设置惯性
controls.update();

// 6、添加辅助坐标系和辅助网格
const axesHelper = new THREE.AxesHelper(100); // 辅助坐标系
scene.add(axesHelper);
const gridHelper = new THREE.GridHelper(20, 50); // 参数：一个格子的大小，网格一条边有多少个格子
scene.add(gridHelper);
// 最后，在页面上渲染场景和摄像机
function render() {
  controls.update();
  renderer.render(scene, camera);
  // [注意]请求浏览器执行下一帧继续调用render方法
  // 这个render方法会不停地调用
  requestAnimationFrame(render);
}
render();
</script>

<template></template>

<style scoped></style>
